import '@wangeditor/editor/dist/css/style.css';
import React, { useState, useEffect } from 'react';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import { Select, Button, Form, message } from 'antd'; // 引入Ant Design组件
import 'antd/dist/reset.css'; // 引入Ant Design样式

// 解构Select组件的Option
const { Option } = Select;

export const AddArticle = () => {
    // 编辑器实例
    const [editor, setEditor] = useState(null);
    // 编辑器内容
    const [html, setHtml] = useState('');
    // 选中的产品ID
    const [selectedProductId, setSelectedProductId] = useState('');
    // 产品列表数据（实际项目中可能从API获取）
    const [products, setProducts] = useState([
        { id: 1, name: '产品A' },
        { id: 2, name: '产品B' },
        { id: 3, name: '产品C' },
        { id: 4, name: '产品D' }
    ]);

    // 工具栏配置
    const toolbarConfig = {};

    // 编辑器配置
    const editorConfig = {
        placeholder: '请输入内容...',
    };

    // 及时销毁 editor ，重要！
    useEffect(() => {
        return () => {
            if (editor == null) return;
            editor.destroy();
            setEditor(null);
        };
    }, [editor]);

    // 处理确定按钮点击
    const handleConfirm = () => {
        if (!selectedProductId) {
            message.warning("请选择产品");
            return;
        }
    // 移除所有HTML标签，只保留文本内容
        const textContent = html.replace(/<[^>]+>/g, '').trim();
        
        // 如果去除HTML标签后没有实际内容，视为空
        if (!textContent) {
            message.warning('请输入文章内容');
            return;
        }


        // 这里可以获取到选中的产品ID和文章内容
        const result = {
            productId: selectedProductId,
            articleContent: html
        };

        // 打印结果，实际项目中可能会提交到服务器
        console.log('提交的内容:', result);

        // 可以在这里添加提交到服务器的逻辑
        // submitArticle(result).then(...).catch(...);

        // 提交后可以重置表单
        // setSelectedProductId('');
        // setHtml('');
        // if (editor) editor.clear();
    };

    return (
        <div>
            {/* 产品选择区域 - 使用Ant Design的Select */}
            <div
                style={{ marginBottom: '15px', display: "flex", justifyContent: "space-between" }}
            >
                <div>
                    <label>选择产品:</label>
                    <Select
                        value={selectedProductId}
                        onChange={(value) => setSelectedProductId(value)}
                        placeholder="-- 请选择产品 --"
                        style={{ width: 300 }}
                    >
                        {products.map(product => (
                            <Option key={product.id} value={product.id.toString()}>
                                {product.name}
                            </Option>
                        ))}
                    </Select>
                </div>
                {/* 确定按钮 - 使用Ant Design的Button */}
                <Button
                    type="primary"
                    onClick={handleConfirm}
                    style={{ textAlign: "right" }} // 与选择框对齐
                >
                    确定
                </Button>
            </div>

            {/* 富文本编辑器 */}
            <div style={{ border: '1px solid #ccc', zIndex: 100, marginBottom: '15px' }}>
                <Toolbar
                    editor={editor}
                    defaultConfig={toolbarConfig}
                    mode="default"
                    style={{ borderBottom: '1px solid #ccc' }}
                />
                <Editor
                    defaultConfig={editorConfig}
                    value={html}
                    onCreated={setEditor}
                    onChange={(editor) => setHtml(editor.getHtml())}
                    mode="default"
                    style={{ height: '500px', overflowY: 'auto' }}
                />
            </div>


        </div>
    );
};
